<template>
	<el-dialog width="30%" :before-close="handleClose" title="补录" v-model="visible" :close-on-click-modal="false" append-to-body>
		<el-form :model="form" label-width="80px" ref="formRef" :rules="rules">
			<el-form-item label="血糖类型" prop="bloodGlucoseType">
				<el-select v-model="form.bloodGlucoseType" placeholder="请选择血糖类型">
					<el-option v-for="item in bloodx_fasting" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="血糖值" prop="bloodGlucoseValue">
				<el-input-number v-model="form.bloodGlucoseValue" :precision="1" :step="0.1" :min="0" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="handleSubmit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDict } from '/@/hooks/dict';
import { addBloodGlucose } from '/@/api/blood/bloodxCustomerBlood';
import { useMessage } from '/@/hooks/message';
const emits = defineEmits(['after-close']);
const { bloodx_fasting } = useDict('bloodx_fasting');
const message = useMessage();
const customerId = ref(0);

// dialog是否显示
const visible = ref(false);

// 表单ref
const formRef = ref();

const rules = ref({
	bloodGlucoseType: [{ required: true, message: '请选择血糖类型', trigger: 'blur' }],
	bloodGlucoseValue: [{ required: true, message: '请输入血糖值', trigger: 'blur' }],
});

// 表单数据
const form = ref({
	bloodGlucoseType: '',
	bloodGlucoseValue: 0,
});

// 打开dialog
function openDialog(row) {
	visible.value = true;
	customerId.value = row.id;
}

// 关闭dialog
function handleClose(done) {
	formRef.value?.resetFields();
	done();
}

// 提交表单
function handleSubmit() {
	formRef.value?.validate((valid) => {
		if (valid) {
			addBloodGlucose({
				customerId: customerId.value,
				isFasting: form.value.bloodGlucoseType,
				num: form.value.bloodGlucoseValue,
			}).then(() => {
				message.success('补录成功');
				formRef.value?.resetFields();
				visible.value = false;
				emits('after-close');
			});
		}
	});
}

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
</style>
